<template>
    <div class="icon-box">
        <div class="icon-item" @click="copyCode(item.icon)" :class="`icon ${item.icon}`"  v-for="(item, index) in iconList" :key="index"></div>       
        <!-- <div class="mls">{{item.icon}}({{item.value}})</div> -->
        <!-- <input type="text" maxlength="1" readonly :value="`&#xe800;`" class="lnr" /> -->
	</div>
</template>
<script setup>
import iconData from './icon-data.js'
const iconList  = iconData
const copyCode = (val) =>{
    // 创建元素用于复制
    const aux = document.createElement('input')
    // 获取复制内容
    const content = `<i class="icon ${val}"></i>`
    // 设置元素内容
    aux.setAttribute('value', content)
    // 将元素插入页面进行调用
    document.body.appendChild(aux)
    // 复制内容
    aux.select()
    // 将内容复制到剪贴板
    document.execCommand('copy')
    // 删除创建元素
    document.body.removeChild(aux)
}
</script>
<style scoped>
.icon-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.icon-item{
    padding: 5px;
    font-size: 24px;
}
</style>